<template>

    <div class="block text-center">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in carouseData" :key="item.id">
          <img style="object-fit: scale-down;height: 100%;width: 100%" :src="item.url" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

  <br/>

  <div class="container">
    <el-divider class="my-divider" content-position="left">请选择您的年龄范围
    </el-divider>
  </div>

  <el-steps :active="activeStep" class="step-bar" align-center>
    <el-step
        v-for="(step, index) in stepsData"
        :key="step.id"
        :title="step.title"
        :description="step.description"
        @click="goToStepPage(index)"
        :status="step.status"
    ></el-step>
  </el-steps>

    <div class="container">
      <el-divider class="my-divider" content-position="left">在这里，您将获得</el-divider>
    </div>

    <div class="container">
      <div style="display: flex; align-items: start;gap: 5px;">

      <el-card class="box-card hover-card">
        <template v-slot:header>
          <h2>系统简介</h2>
        </template>
          <span>基于深度学习的医疗方案推荐系统是一种利用深度学习技术和医疗数据为患者推荐最佳医疗方案的系统。</span>
      </el-card>


      <el-card class="box-card hover-card">
        <template v-slot:header>
          <h2>功能特点</h2>
        </template>
        <span>1、用户可在首页选择年龄进行病例查找</span>
        <span>2、用户可在左侧选择想查找的医院及医生</span>
        <span>3、用户可在下方的快速入口进入诊断流程</span>
      </el-card>

      <el-card class="box-card hover-card" @click="Diagnosis">
        <template v-slot:header>
          <h2>快速入口</h2>
        </template>
          <span>前往病症诊断页面</span>
      </el-card>

        <div style="color:#5c8fc4 ">
          <h2>医疗辅助诊断系统，旨在</h2>
          <h2>为人们提供更精密且易上手</h2>
          <h2>的系统</h2>
        </div>

      </div>
    </div>

</template>

<script>
import child from "@/views/Views_Main/Child";
import {UserFilled} from "@element-plus/icons-vue";

export default {
  name: "MainHome",
  components:[
      child,
      UserFilled,

  ],
  data(){
    return {
      carouseData: [
        {id:0,url: require("@/assets/medical1.png")},
        {id:1,url: require("@/assets/medical2.png")},
        {id:2,url: require("@/assets/tech1.png")},
        {id:3,url: require("@/assets/tech2.png")},
      ],

      activeStep: 0, // 当前步骤条的激活节点
      stepsData: [
        { id: 1, title: '儿童', description: '0-11岁', url: '/child',status:'process' },
        { id: 2, title: '青少年', description: '11-19岁', url: '/adolescent',status:'process'},
        { id: 3, title: '中老年', description: '45-60岁', url: '/old',status:'process'},
        { id: 4, title: '全部人群', description: '', url: '/all',status:'process' },
      ],
    }

  },
  methods: {

    goToStepPage(index) {
      // 更新当前步骤条的激活节点
      this.activeStep = index;

      // 进行页面跳转
      const url = this.stepsData[index].url;
      this.$router.push(url);
    },
    Diagnosis(){
      this.$router.push('/diagnosis')
    }
  },

}
</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.my-divider /deep/ .el-divider__text.is-left {

  font-weight: bold;
  font-size: 30px;
}

.my-divider /deep/ .el-divider-inner {
  border-width: 7px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  margin: 15px;
  border-radius: 15px;
  width: 250px;
  height: 250px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all .3s;
  background-image: linear-gradient(#d4e5ef,white);
}

.box-card:hover {
  transform: scale(1.03);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1), 0 3px 10px -5px rgba(0, 0, 0, 0.2);
}

.step-bar {
  margin: 40px;
}

</style>